<template>
  <!------------------------------------ 商品详情弹窗 ------------------------------------
    @desc 包含商品促销、配送、规格、参数
    @author kyle
    @date 2021-03-05
    @props
      detailData     ———— 商品详情数据
      evaluateData   ———— 商品评论数据
    @method
      showOpt    ———— 显示弹窗
      clickLeft  ———— 头部左侧返回按钮
  -->
  <div id="popScrollBox" ref="popScrollBox" class="pos-r full-height full-width ofs" :class="ProductInfo.SaleStatus==0?'has-bottom':''">
    <div ref="info" class="pos-r">
      <!-- 商品头部 -->
      <productHead :list="detailData.imgList" :video-url="detailData.VideoUrl" :scroll-top="scrollTop" @changeDetail="changeDetail" @clickLeft="clickLeft" />

      <!-- 商品简介 -->
      <productIntro :data="detailData" @share="share" :storeId="storeId"/>

      <!-- 商品标签 -->
      <productTag v-show="ProductInfo&&ProductInfo.TagsList&&ProductInfo.TagsList.length>0" :tag-list="ProductInfo.TagsList" />

      <!-- 运费 -->
      <productFreight :data="detailData" />

      <!-- 促销、配送 -->
      <div v-show="PolicyList&&PolicyList.length>0" class="product-option mt-10">
        <productOption v-if="PolicyList&&PolicyList.length>0" opt-type="sales" :policy-list="PolicyList" />
        <productOption opt-type="post" :product="ProductInfo" :address="UserAddress" @changeAddress="changeAddress" />
      </div>

      <!--参数、规格 -->
      <div v-show="(ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0)||ProductInfo.ParamerValue" class="product-option mt-10">
        <productOption v-if="ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0" opt-type="attr" :attr-list="ProductInfo.ProductAttributesList" :product="ProductInfo" @showOpt="showOpt" />
        <productOption v-if="ProductInfo.ParamerValue" opt-type="param" :product="ProductInfo" />
      </div>

      <!-- 评价模块 -->
      <productEvaluate :data="evaluateData" :product-id="ProductID" />
    </div>
    <!-- 详情模块 -->
    <div ref="detail" class="product-detail mt-10 ofh">
      <p class="product-detail-tle fw-b">商品详情</p>
      <div v-show="ProductInfo.Description" class="pt-15" v-html="ProductInfo.Description" />
    </div>

    <div v-if="ProductInfo.SaleStatus==0" class="flex-v-c bottom-box ht">
      <a :href="'tel:'+detailData.ServiceTel" class="tel-text mlr-50 color-white tac lh-80 fs-28 flex-1">电话咨询</a>
    </div>

  </div>

</template>

<script>
import productHead from 'components/productDetail/head'
import productIntro from 'components/productDetail/introduction'
import productTag from 'components/productDetail/tag'
import productFreight from 'components/productDetail/freight'
import productOption from 'components/productDetail/option'
import productEvaluate from 'components/productDetail/evaluate'

export default {
  name: 'ProductDetailPage',
  components: {
    productHead,
    productIntro,
    productTag,
    productFreight,
    productOption,
    productEvaluate,
  },
  props: {
    detailData: { // 商品数据
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    storeId: {
      type: String,
      required: false,
      default: ''
    },
    evaluateData: { // 评价数据
      type: Object,
      required: false,
      default: function() {
        return {}
      } 
		},
  },
  data() {
    return {
      // 头部数据
      scrollTop: 0

    }
  },
  computed: {
    ProductInfo() {
      return this.detailData.ProductInfo
    },
    UserAddress() {
      return this.detailData.UserAddress
    },
    PolicyList() {
      return this.detailData.PolicyList
    },
    StoreInfo() {
      return this.detailData.StoreInfo
    },
    ProductID() {
      return this.detailData.ProductInfo.ID
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(function() {
      this.$refs.popScrollBox.addEventListener('scroll', this.sroll)
    })
  },
  methods: {
    // 商品、详情切换
    changeDetail(index) {
      console.log(index)
      // 加入锚点
      let height = 0
      switch (index) {
        case 0:
          height = 0
          break
        case 1:
          height = this.$refs.info.offsetHeight - 88
          break
      }
      // 这里需要搞一个滚动过渡动画
      // this.$refs.popScrollBox.scrollTop = height
      this.$utils.animateScrollTop(height, 30, 'popScrollBox')
    },
    clickLeft() {
      this.$emit('clickLeft')
    },
    showOpt(type) {
      this.$emit('showOpt', type)
    },

    // 调用分享弹窗
    share() {
      const _url = this.$LocalDomain + '/circle/#/QuickPlaceOrder/detail/' + this.ProductID
      console.log(_url)
    },
    changeAddress(address) {
      console.log(address)
      this.$emit('changeAddress', address)
    },
    sroll() {
      this.scrollTop = this.$refs.popScrollBox.scrollTop
    }

  }
}
</script>
<style lang="scss" scoped>

// 详情
.product-detail{
  background: $colorF;
  padding: 16px 0;
  .product-detail-tle{
    padding: 0 32px ;
    font-size: 30px;
    line-height: 1;
    position: relative;
    &::before{
      content:'';
      position: absolute;
      width: 6px;
      border-radius: 3px;
      height: 30px;
      @include bg-primary;
      top: 0px;
      left: 15px;
    }
  }
}
.product-option{
  background: $colorF;
    padding: 25px 32px;
}
.bottom-popup{
  border-radius: 40px 40px 0 0;
}
.bottom-box{
  position: fixed;
  background: $colorF;
  height: 130px;
  z-index: 2;
  width: 100%;
  bottom: 0;
  left: 0;
  .tel-text{
    @include bg-primary;
    border-radius: 40px;
  }
}
</style>
